<template>
  <div class="content-box">
    <goods-top-box>
      <template v-slot:left-one>{{ title }}</template>
    </goods-top-box>
    
    <div class="content-big-item">
      <template v-for="item in contents">
    
        <content-item-box :item="item"></content-item-box>
  
      </template>
    
    </div>
    
  </div>
</template>

<script>
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";
import ContentItemBox from "@/components/Mi/Common/ContentItemBox";

export default {
  components: {
    GoodsTopBox,
    ContentItemBox,
  },
  name: "GoodsContent",
  data() {
    return {
      title: '',
      contents: [],
      
    }
  },
  created() {
    this.getGoodsContent()
  },
  methods: {
    async getGoodsContent() {
      const {data: res} = await this.$http.get('content')
      this.title = res.title
      this.contents = res.contents
     
    },
  },
}
</script>

<style scoped lang="less">
.content-big-item{
  display: flex;
  justify-content: space-between;
}
</style>
